<template>
  <label class="SliderComponent">
    <span class="label">{{ label }}：</span>
    <span class="value">{{ value }}{{ suffix }}</span>
    <div class="slider" @pointerdown="cancelEvent" @pointermove="cancelEvent">
      <VueSlider :min="min" :max="max" :interval="step" v-model="value" />
    </div>
  </label>
</template>
<script lang="ts">
import { computed, defineComponent } from "vue";
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/antd.css";

export default defineComponent({
  props: {
    modelValue: { default: 0, type: Number },
    min: { default: 0, type: Number },
    max: { default: 100, type: Number },
    step: { default: 1, type: Number },
    label: { default: "", type: String },
    suffix: { default: "", type: String }
  },
  emits: ["update:modelValue"],
  components: {
    VueSlider
  },
  setup(props, ctx) {
    const value = computed({
      get: () => props.modelValue,
      set: (v) => ctx.emit("update:modelValue", v * 1)
    });

    const cancelEvent = (e: Event) => {
      e.stopPropagation();
    };

    return {
      value,
      cancelEvent
    };
  }
});
</script>